$btn-padding: 0.6rem 0.9rem;
$btn-border-radius: 0.5rem;
$btn-transition-time: 64ms;

$btn-type: (
  "info": (
    "color": #fff,
    "background-color": #0091ea,
  ),
  "success": (
    "color": #fff,
    "background-color": #00c853,
  ),
  "error": (
    "color": #fff,
    "background-color": #d50000,
  ),
  "warning": (
    "color": #3e2723,
    "background-color": #ffc400,
  ),
  "dark": (
    "color": #fff,
    "background-color": #303030,
  ),
  "beans": (
    "color": #fff,
    "background-color": #ff4081,
  ),
);

@mixin btns {
  .btn {
    $color: #000;
    $background-color: #d8d8d8;
    $border-color: darken($background-color, 7.5%);
    @each $type, $props in $btn-type {
      &.#{"btn-" + $type} {
        $color: map-get($props, "color");
        $background-color: map-get($props, "background-color");
        color: $color;
        background-color: $background-color;
        border: 1px solid darken($background-color, 7.5%);
        &:active {
          $border-color: darken($background-color, 7.5%);
          border-color: $border-color;
        }
      }
    }
    color: $color;
    font-family: inherit;
    font-weight: bold;
    background-color: $background-color;
    padding: $btn-padding;
    border: 1px solid $border-color;
    outline: none;
    position: relative;
    border-radius: $btn-border-radius;
    user-select: none;
    box-shadow: 0 0.2rem 0.4rem rgba(0, 0, 0, 0.4),
      0 -0.3rem 0.6rem rgba(0, 0, 0, 0.2) inset;
    transition: box-shadow $btn-transition-time ease-out;
    &::after {
      content: "";
      background-color: #fff;
      position: absolute;
      width: 75%;
      height: 12.5%;
      top: 0.15rem;
      left: 12.5%;
      border-radius: 50%;
      filter: blur(0.15rem);
      transition: opacity $btn-transition-time ease-out;
    }
    &:hover {
      cursor: pointer;
      background-color: filter(brightness(60%));
    }
    &:active {
      box-shadow: 0 0 0 rgba(0, 0, 0, 0.4),
        0 0.4rem 1rem rgba(0, 0, 0, 0.3) inset;
      &::after {
        opacity: 0;
      }
    }
  }
}
